{% extends 'web/base.html' %}
{% load staticfiles %}
{% block base_title %} 支付 {% endblock %}

<!--{% block manifest %}appcache/pay.appcache{% endblock %}-->
{% block base_run %}pay{% endblock %}

{% block base_body %}
{% verbatim %}
<div class="ding padding scroll all_bg" id="pay">
    <div v-if="loading"></div>
    <div v-else class="load_fix">
        <div class="zuan_center" style="background:none;">
            <div class="ui active centered inline loader red" style="top: 50%;transform: scale(.6)"></div>
        </div>
    </div>

    <div class="ding_na">
        <div class="ding_na_img">
            <img :src="'http://www.zgtxcj.com/'+zuanx.d_image">
        </div>
        <div class="ding_name">
            <p class="ding_name_t">{{ zuanx.d_name }}专享</p>
        </div>
        <div class="ding_mon">{{ zuanx.d_editprice }}元/{{ zuanx.d_edition }}个月</div>
    </div>
    <div class="ding_zeng" v-if="zuanCh.length>0">
        <div class="ding_zeng_t">赠送(必选) :</div>
        <div class="ding_zeng_b">
            <div v-for="chan in zuanCh" >
                <div :yid="chan.product.p_id" class="ding_zeng_line">
                    <span class="ding_zeng_qu"></span>
                    {{ chan.product.p_name }}
                </div>
            </div>
        </div>
    </div>
    <div class="ding_shou">
        <div class="ding_shou_t">收款方</div>
        <div class="ding_shou_jie">公司名称：天下财经（北京）证券咨询有限公司</div>
        <div class="ding_shou_jie">招商银行：110-92867-1810-901</div>
        <div class="ding_shou_jie">公司邮箱：txcaijing@sina. com</div>
        <div class="ding_shou_di">
            <!--<div class="ding_shou_cheng">城市：石家庄</div>-->
            <div class="ding_shou_cheng" style="width:5rem">联系电话：400-6311-265</div>
        </div>
    </div>
    <div class="ding_time">
        <div class="ding_time_kai" style="height: .7rem">
            <div class="ding_time_kl" style="line-height: .7rem">开通时长：</div>
            <div class="ding_time_kx">
                <div class="ding_time_dis" v-if="1>=zuanx.d_edition">
                    <div v-if="1==zuanx.d_edition" class="ding_time_kxm ding_time_kxn">1</div>
                    <div v-else class="ding_time_kxm">1</div>
                </div>
                <div class="ding_time_dis" v-if="3>=zuanx.d_edition">
                    <div v-if="3==zuanx.d_edition" class="ding_time_kxm ding_time_kxn">3</div>
                    <div v-else class="ding_time_kxm">3</div>
                </div>
                <div class="ding_time_dis" v-if="6>=zuanx.d_edition">
                    <div v-if="6==zuanx.d_edition" class="ding_time_kxm ding_time_kxn">6</div>
                    <div v-else class="ding_time_kxm">6</div>
                </div>
                <div class="ding_time_dis" v-if="12>=zuanx.d_edition">
                    <div v-if="12==zuanx.d_edition" class="ding_time_kxm ding_time_kxn">12</div>
                    <div v-else class="ding_time_kxm">12</div>
                </div>
                <div class="ding_time_kxi">
                    <input type="tel" value="1" @blur="zuanTi()" class="ding_time_inp" placeholder="其他时长" v-model="zuan_now">
                    <span>/月</span>
                </div>
            </div>
        </div>
        <div class="ding_time_kai">
            <div class="ding_time_kl">合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计：</div>
            <div v-if="zuan_now==''" class="ding_time_kr">￥{{ zuanx.d_editprice }}元</div>
            <div v-else class="ding_time_kr" >￥{{ zuanx.d_price*zuan_now }}元</div>
        </div>
        <div class="ding_time_zhi">
            <div class="ding_time_kl">支付方式：</div>
            <div fid="6" class="ding_time_kzs ding_time_kzf">
                <div class="ding_time_kziw"></div>
            </div>
            <div fid="5" class="ding_time_kzs">
                <div class="ding_time_kzim"></div>
            </div>
        </div>
    </div>
    <!--<router-link to="/zhifu"></router-link>-->
    <!--<a href="">-->
    <form method="post" action="../example/tiaozhuan.php">
        <input type="hidden" name="o_id" v-model='zuanx.d_id' />   <!--产品ID-->
        <input type="hidden" class='o_zengid' name="o_zengid"/> <!--赠品ID-->
        <input type="hidden" class='o_useid' name="o_useid"/> <!--用户ID-->
        <input type="hidden" class='o_time' name="o_time"/> <!--购买时长-->
        <input type="hidden" class='o_price' name="o_price"/> <!--产品单价-->
        <input type="hidden" class='o_name' name="o_name" v-model='zuanx.d_name'/> <!--产品名称-->
        <input  type="submit"  disabled="disabled" class="click_txt ding_time_tong" value="提交订单">
    </form>
    <input  type="submit"  disabled="disabled" class="click_txt ding_time_tong1" value="提交订单">
    <!--</a>-->
</div>
{% endverbatim %}
{% endblock %}

{% block base_script %}
    var pay = new Vue({
        el:'#pay',
        data:{
            myUrl:'http://api.zgtxcj.com/txcjapi/',
            did:localStorage.getItem('did'),
            zuanx:[],
            zuan_now:'',
            zuanCh:[],
            yue:'',
            type:'',
            yid:'',
            bian:'',
            money:'',
            mandt:'',
            zuanNum:'',
            yuemon:'',
            loading: false,
            phone: localStorage.getItem('phone'),
            pass: localStorage.getItem('pass'),
        },
        methods:{
            zuanTi:function(){
                var self = this;
                console.log(self.zuanx);
                if (self.zuan_now<self.zuanx['d_edition']){
                    self.zuan_now='';
                    $('.ding_time_kxm').eq(0).addClass('ding_time_kxn');
                    $('.ding_time_kr').html('￥'+self.zuanx['d_editprice']+'元')
                }else {
                    // console.log(this.zuan_now)
                    $('.ding_time_kxm.ding_time_kxn').removeClass('ding_time_kxn');
                    $('.ding_time_kr').html('￥'+self.zuanx['d_orderprice']*$(".ding_time_inp").val()+'元')
                }
            },
            yestu:function(){
                $('.ding_zeng_line').click(function () {
                    $('.imgre').remove();
                    $(this).find('.ding_zeng_qu').append('<img class="imgre" src="{% static 'img/yes.png' %}"/>')
                })
            },
            getXi:function(){
                var self = this;
                reqwest({
                    url:self.myUrl+'indiamonds/?tag=diamonds&id='+self.did,
                    method:'get',
                    type:'json',
                    success:function(resp){
                        if(resp['d_time']==30){
                            resp['d_time']='月'
                        }else if(resp['d_time']==90){
                            resp['d_time']='季'
                        }else if(resp['d_time']=='365'){
                            resp['d_time']='年'
                        }
                        if(resp['d_image'].indexOf('|')!=-1){
                            resp['d_image']=resp['d_image'].split('|')[0]
                        }
                        self.yuemon=resp['d_price'];
                        self.zuanx=resp;
                        self.getChan();
                        self.loading = true;
                    }
                })
            },
            getChan:function(){
                var self = this;
                reqwest({
                    url: self.myUrl + 'indiamonds/?tag=diapro&id=' + self.did,
                    method: 'get',
                    type: 'json',
                    success:function(resp){
                        for (var t in resp){
                            resp[t]['product']['p_image']=resp[t]['product']['p_image'].split('|')[0];
                            if(resp[t]['dp_tag']==3){
                                self.zuanCh.push(resp[t])
                            }
                        }
                        self.kaicli();
                    }
                })
            },
            kaicli:function(){
                this.$nextTick(function() {
                    var self = this;
                    $('.ding_time_tong').removeAttr('disabled');
                    $('.ding_time_tong1').removeAttr('disabled');
                    $('.ding_time_kzs').click(function () {
                        var index = $(this).index();
                        $('.ding_time_kzs').removeClass('ding_time_kzf').eq(index - 1).addClass('ding_time_kzf')
                    });
                    self.yestu();
                    self.numClick();
                    localStorage.setItem('mat', $('.ding_mon').html());
                    var ua = window.navigator.userAgent.toLowerCase();
                    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                        $('.ding_time_tong1.click_txt').hide();
                        $('.ding_time_tong.click_txt').show();
                        $('.ding_time_tong').click(function () {
                            var ua = window.navigator.userAgent.toLowerCase();
                            self.type = $('.ding_time_kzf').attr('fid');
                            if ($('.ding_time_inp').val() == '') {
                                self.yue = $('.ding_time_kxn').html();
                            } else {
                                self.yue = $('.ding_time_inp').val();
                            }
                            window.localStorage.setItem('yue', self.yue);
                            window.localStorage.setItem('pname', self.zuanx.d_name);
                            self.gift = $('.imgre').parent('.ding_zeng_qu').parent('.ding_zeng_line').attr('yid');
                            if (self.gift == undefined) {
                                self.gift = 0
                            };
                            window.localStorage.setItem('gift', self.gift);
                            self.money = $('.ding_time_kr').html();
                            localStorage.setItem('money', self.money);
                            if (self.zuanCh.length == 0) {
                                if (self.type == 5) {
                                    // self.$router.forward({path:'/zhifu'})
                                    location.href = "/xz/login/?phone=" + self.phone + "&pass=" + self.pass + "&redir=zhifu"
                                } else {
                                    window.localStorage.setItem('pname', self.zuanx.d_name);
                                    self.mandt = $('.ding_mon').html();
                                    $('.o_zengid').val($('.imgre').parent('.ding_zeng_qu').parent('.ding_zeng_line').attr('yid'));
                                    $('.o_money').val($('.ding_time_kr').html());
                                    $('.o_useid').val(localStorage.getItem('uid'));
                                    $('.o_time').val(self.yue);
                                    $('.o_price').val(self.zuanx['d_price']);
                                }
                            } else {
                                if ($('.imgre').length > 0) {
                                    if (self.type == 5) {
                                        // self.$router.forward({path:'/zhifu'})
                                        location.href = "/xz/login/?phone=" + self.phone + "&pass=" + self.pass + "&redir=zhifu"
                                    } else {
                                        window.localStorage.setItem('pname', self.zuanx.d_name);
                                        self.mandt = $('.ding_mon').html();
                                        $('.o_zengid').val($('.imgre').parent('.ding_zeng_qu').parent('.ding_zeng_line').attr('yid'));
                                        $('.o_money').val($('.ding_time_kr').html());
                                        $('.o_useid').val(localStorage.getItem('uid'));
                                        $('.o_time').val(self.yue);
                                        $('.o_price').val(self.zuanx['d_price']);
                                    }
                                } else {
                                    alert("请选择赠送内容")
                                    return false;
                                }
                                ;
                            }
                        });
                    } else {
                        $('.ding_time_tong.click_txt').hide();
                        $('.ding_time_tong1.click_txt').show();
                        $('.ding_time_tong1').click(function () {
                            var ua = window.navigator.userAgent.toLowerCase();
                            self.type = $('.ding_time_kzf').attr('fid');
                            if ($('.ding_time_inp').val() == '') {
                                self.yue = $('.ding_time_kxn').html();
                            } else {
                                self.yue = $('.ding_time_inp').val();
                            }
                            window.localStorage.setItem('yue', self.yue);
                            window.localStorage.setItem('pname', self.zuanx.d_name);
                            self.gift = $('.imgre').parent('.ding_zeng_qu').parent('.ding_zeng_line').attr('yid');
                            if (self.gift == undefined) {
                                self.gift = 0
                            }
                            window.localStorage.setItem('gift', self.gift);
                            self.money = $('.ding_time_kr').html();
                            localStorage.setItem('money', self.money);
                            localStorage.setItem('did', self.zuanx['d_id']);
                            if (self.zuanCh.length == 0) {
                                if (self.type == 5) {
                                    // self.$router.forward({path:'/zhifu'})
                                    location.href = "/xz/login/?phone=" + self.phone + "&pass=" + self.pass + "&redir=zhifu"
                                } else {
                                    reqwest({
                                        url: 'http://api.zgtxcj.com/txcjapi/placeorder/',
                                        method: 'post',
                                        type: 'json',
                                        data: {
                                            uid: localStorage.getItem('uid'),
                                            type: 6,
                                            num: self.yue,
                                            gift: self.gift,
                                            did: self.zuanx['d_id']
                                        },
                                        success: function (resp) {
                                            self.id_order = resp;
                                            // function get_client_ip() {
                                            //     $cip = "unknown";
                                            //     if($_SERVER['REMOTE_ADDR']){
                                            //         $cip = $_SERVER['REMOTE_ADDR']
                                            //     }else if(getenv("REMOTE_ADDR")){
                                            //         $cip = getenv("REMOTE_ADDR");
                                            //     }
                                            //     return $ip
                                            // }
                                            // +'&ip='+get_client_ip()
                                            reqwest({
                                                url: 'http://api.zgtxcj.com/mobile/wxpay/?o_id=' + self.id_order + '&d_name=' + self.zuanx.d_name,
                                                method: 'get',
                                                type: 'json',
                                                success: function (resp) {
                                                    // alert(resp);
                                                    window.location.href = resp
                                                    //+'&redirect_url=http%3a%2f%2fwx.zgtxcj.com%2fgongzhonghao%2fzhifusuc.html&Position=xz'
                                                    //window.location.href=resp+'&redirect_url=http%3A%2F%2Fxz.zgtxcj.com%2Fgongzhonghao%2Findex.html%23%2FcallBack'
                                                }
                                            })
                                        }
                                    });
                                    window.localStorage.setItem('pname', self.zuanx.d_name);
                                    self.mandt = $('.ding_mon').html();
                                    $('.o_zengid').val($('.imgre').parent('.ding_zeng_qu').parent('.ding_zeng_line').attr('yid'));
                                    $('.o_money').val($('.ding_time_kr').html());
                                    $('.o_useid').val(localStorage.getItem('uid'));
                                    $('.o_time').val(self.yue);
                                    $('.o_price').val(self.zuanx['d_price']);
                                }
                            } else {
                                if ($('.imgre').length > 0) {
                                    if (self.type == 5) {
                                        // self.$router.forward({path:'/zhifu'})
                                        location.href = "/xz/login/?phone=" + self.phone + "&pass=" + self.pass + "&redir=zhifu"
                                    } else {
                                        reqwest({
                                            url: 'http://api.zgtxcj.com/txcjapi/placeorder/',
                                            method: 'post',
                                            type: 'json',
                                            data: {
                                                uid: localStorage.getItem('uid'),
                                                type: 6,
                                                num: self.yue,
                                                gift: self.gift,
                                                did: self.zuanx['d_id'],
                                            },
                                            success: function (resp) {
                                                self.id_order = resp;
                                                // function get_client_ip() {
                                                //     $cip = "unknown";
                                                //     if($_SERVER['REMOTE_ADDR']){
                                                //         $cip = $_SERVER['REMOTE_ADDR']
                                                //     }else if(getenv("REMOTE_ADDR")){
                                                //         $cip = getenv("REMOTE_ADDR");
                                                //     }
                                                //     return $ip
                                                // }+'&ip='+get_client_ip()
                                                reqwest({
                                                    url: 'http://api.zgtxcj.com/mobile/wxpay/?o_id=' + self.id_order + '&d_name=' + self.zuanx.d_name,
                                                    method: 'get',
                                                    type: 'json',
                                                    success: function (resp) {
                                                        window.location.href = resp
                                                        //+'&redirect_url=http%3a%2f%2fwx.zgtxcj.com%2fgongzhonghao%2fzhifusuc.html&Position=xz'
                                                    }
                                                })
                                            }
                                        });
                                        window.localStorage.setItem('pname', self.zuanx.d_name);
                                        self.mandt = $('.ding_mon').html();
                                        $('.o_zengid').val($('.imgre').parent('.ding_zeng_qu').parent('.ding_zeng_line').attr('yid'));
                                        $('.o_money').val($('.ding_time_kr').html());
                                        $('.o_useid').val(localStorage.getItem('uid'));
                                        $('.o_time').val(self.yue);
                                        $('.o_price').val(self.zuanx['d_price']);
                                    }
                                } else {
                                    alert('请选择赠送内容');
                                    return false;
                                };
                            }
                        })
                    }
                })
            },
            numClick:function () {
                var self = this;
                $('.ding_time_dis').click(function () {
                    self.zuan_now = '';
                    var index = $(this).index();
                    $('.ding_time_kxm.ding_time_kxn').removeClass('ding_time_kxn');
                    $(this).find('.ding_time_kxm').addClass('ding_time_kxn');
                    self.zuanNum = $('.ding_time_kxn').html();
                    $('.ding_time_kr').html('￥' + self.yuemon * self.zuanNum + '元')
                })
            },
            run:function () {
                    this.getXi();
                }
        },
    })
{% endblock %}
